<template>
  <div>
    <el-row >
      <el-col :span="1"></el-col>
      <el-col :span="22">
        <el-row :gutter="15">
          <el-col :span="6">
            <el-card>

              <el-row>
                <span style="font-size: 13px">今日归还人数</span>
              </el-row>
              <el-row style="height: 45px;margin-top: 18px">
                <span style="font-size: 42px;align-items: center">{{todayManNumber}}</span>
                <span style="font-size: 20px;margin-top: 17px">人</span>
              </el-row>
              <el-row style="margin-top: 20px;font-size:13px ">
                <span v-if="todayManyOrLess < 0 ">较昨日减少{{todayCompare}}人 &nbsp;&nbsp;</span>
                <span v-else-if="todayManyOrLess > 0 ">较昨日增加{{todayCompare}}人 &nbsp;&nbsp;</span>
                <span v-else>与昨日持平 &nbsp;&nbsp;</span>
                <el-icon v-if="todayManyOrLess > 0" color="green" size="20"><CaretTop /></el-icon>
                <el-icon v-if="todayManyOrLess <0" color="red" size="20"><CaretBottom /></el-icon>
              </el-row>
              <el-row style="margin-top: 20px;font-size: 13px">
                <a style="text-decoration: underline">查看详情</a>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>

              <el-row>
                <span style="font-size: 13px">今日未归还人数</span>
              </el-row>
              <el-row style="height: 45px;margin-top: 18px">
                <span style="font-size: 42px;align-items: center">{{todayNoManNumber}}</span>
                <span style="font-size: 20px;margin-top: 17px">人</span>
              </el-row>
              <el-row style="margin-top: 20px;font-size:13px ">
                <span v-if="todayNoManyOrLess < 0 ">较昨日减少{{todayNoCompare}}人 &nbsp;&nbsp;</span>
                <span v-else-if="todayNoManyOrLess > 0 ">较昨日增加{{todayNoCompare}}人 &nbsp;&nbsp;</span>
                <span v-else>与昨日持平 &nbsp;&nbsp;</span>
                <el-icon v-if="todayNoManyOrLess > 0" color="green" size="20"><CaretTop /></el-icon>
                <el-icon v-if="todayNoManyOrLess <0" color="red" size="20"><CaretBottom /></el-icon>
              </el-row>
              <el-row style="margin-top: 20px;font-size: 13px">
                <a >查看详情</a>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card style="width: 362px;height: 197px;">

              <el-row>
                <span style="font-size: 13px">总未归还人数</span>
              </el-row>
              <el-row style="height: 45px;margin-top: 18px">
                <span style="font-size: 42px;align-items: center">{{toTotileNoManNumber}}</span>
                <span style="font-size: 20px;margin-top: 17px">人</span>
              </el-row>

              <el-row style="margin-top: 20px;font-size: 13px">
                <a >查看详情</a>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card style="width: 362px;height: 197px;">

              <el-row>
                <span style="font-size: 13px">总归还人数</span>
              </el-row>
              <el-row style="height: 45px;margin-top: 18px">
                <span style="font-size: 42px;align-items: center">{{toTotileManNumber}}</span>
                <span style="font-size: 20px;margin-top: 17px">人</span>
              </el-row>

              <el-row style="margin-top: 20px;font-size: 13px">
                <a >查看详情</a>
              </el-row>
            </el-card>
          </el-col>

        </el-row>

      </el-col>
      <el-col :span="1"></el-col>
    </el-row>
  </div>
  <div style="margin-top: 20px">
    <el-row >
      <el-col :span="1"></el-col>
      <el-col :span="22">
        <el-card>
          <el-row style="display: flex; align-items: center; justify-content: space-between; padding: 0 20px;">
            <!-- 左侧内容：归还人数趋势 -->
            <div>
              <span>归还人数趋势</span>
            </div>

            <!-- 右侧内容：日期选择器 -->
            <div>
              <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="——"
                  start-placeholder="开始日期"
                  end-placeholder="截止日期"
              />
            </div>
          </el-row>
          <hr style="border: none;height: 1px;background-color: transparent;border-top: 1px solid rgba(0, 0, 0, 0.3);margin: 20px 0;">
          <div class="chart-container" ref="chartContainerFirst">
            <!-- 图表将渲染在这里 -->
          </div>
        </el-card>
      </el-col>
      <el-col :span="1"></el-col>
    </el-row>
  </div>


</template>

<script setup>
import { onBeforeUnmount } from 'vue';
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const chartContainerFirst = ref(null);


let myChartFirst = null;



var optionFirst = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['已归档人数', '未归档人数']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6', '1-7','1-8', '1-9', '1-10', '1-11', '1-12', '1-13', '1-14','1-15', '1-16', '1-17', '1-18', '1-19', '1-20', '1-21'],

  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '已归档人数',
      type: 'line',
      // stack: 'Total',  这个是数据堆叠显示 就是两根线不能交叉
      data: [820, 932, 901, 2034, 1290, 1330, 1320,223,424,353,656,2131,435,675,234,213,223,253,732,1032,434,555],
    },
    {
      name: '未归档人数',
      type: 'line',
      // stack: 'Total',
      data: [238, 452, 361, 1100, 990, 2030, 1420,223,424,353,626,1731,235,895,114,222,223,263,132,2232,434,765],
    }
  ]
};


onMounted(() => {
  //第一个表
  if (chartContainerFirst.value) {
    myChartFirst = echarts.init(chartContainerFirst.value);
    myChartFirst.setOption(optionFirst);

    // 监听窗口大小变化，以响应式地调整图表大小
    window.addEventListener('resize', () => {
      myChartFirst.resize();
    });
  }
});

onBeforeUnmount(() => {
  // 清理资源
  if (myChartFirst) {
    myChartFirst.dispose();
    window.removeEventListener('resize', myChartFirst.resize);
  }
});

//这是日期选择器1
const value1 = ref('')




// 这个是后端查询今天的所有归还的人人数
const todayManNumber=ref(30)
//查询后端返回回来的值的多少  就是条件查询今天的和昨天归还的人数的多少
const todayManyOrLess=ref(-5)
// 这里面的是绝对值化了的人数差
const todayCompare=ref(Math.abs(todayManyOrLess.value)
)

// 查询今天借出去还未归还的人数
const todayNoManNumber=ref(200)
//查询后端返回回来的值的多少  就是条件查询今日的和昨日未归还的人数的多少
// 这个用来判断的
const todayNoManyOrLess=ref(20)
// 这里面的是绝对值化了的人数差  这个用来现实的
const todayNoCompare=ref(Math.abs(todayNoManyOrLess.value)
)





// 这个是后端查询的所有归还的人人数
const toTotileManNumber=ref(800)
//  所有未归还的人数
const toTotileNoManNumber=ref(30)



</script>

<style scoped>
.chart-container {
  width: 100%; /* 占满父容器宽度 */
  min-height: 500px; /* 设置最小高度，根据需要调整 */
  /* 如果您想要容器在页面上居中（不推荐，因为这通常用于块级元素）
   * 可以使用 Flexbox 或 Grid 布局在外部容器上设置，而不是这里
   */
  /* display: flex;
  justify-content: center;
  align-items: center;
  但请注意，这会使容器内的所有内容都居中，而不仅仅是图表 */
}
.chart-containerSecond {
  width: 100%; /* 占满父容器宽度 */
  min-height: 500px; /* 设置最小高度，根据需要调整 */
  /* 如果您想要容器在页面上居中（不推荐，因为这通常用于块级元素）
   * 可以使用 Flexbox 或 Grid 布局在外部容器上设置，而不是这里
   */
  /* display: flex;
  justify-content: center;
  align-items: center;
  但请注意，这会使容器内的所有内容都居中，而不仅仅是图表 */
}
.chart-containerThird {
  width: 100%; /* 占满父容器宽度 */
  min-height: 500px; /* 设置最小高度，根据需要调整 */
  /* 如果您想要容器在页面上居中（不推荐，因为这通常用于块级元素）
   * 可以使用 Flexbox 或 Grid 布局在外部容器上设置，而不是这里
   */
  /* display: flex;
  justify-content: center;
  align-items: center;
  但请注意，这会使容器内的所有内容都居中，而不仅仅是图表 */
}
</style>
